<template>
  <div class="personal">
    <el-row>
			<el-col :span="18" style="padding-bottom: 20px;">
				<span class="back" @click="back"><i></i> 返回</span>
				<div class="btn-wp">
					<el-button type="primary" @click="saveBtn">保存</el-button>
					<el-button @click="resetForm">重置</el-button>
				</div>
			</el-col>
    </el-row>
		<el-row>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="left">
				<el-col :span="18">
					<div class="scroll-wrap">
						<el-scrollbar class="scrollbar-wrap" style="height:100%">
							<el-card class="box-card" id="printJS-form">
								<div class="header">
									<el-col :span="12" class="header-left">
										<span>工号条码</span>
										<div class="codebg">
											<div id="qrcode" ref="qrcode"></div>
										</div>
									</el-col>
									<el-col :span="12" class="header-left">

										<span>上传头像</span>
										<el-upload
											class="avatar-uploader"
											list-type="picture-card"
											:action="http"
											:show-file-list="false"
											:before-upload="beforeAvatarUpload"
											:on-success="headerSuccess">
											<img v-if="photoArr.header_url" :src="photoArr.header_url" class="avatar">
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
									</el-col>
								</div>
								<div class="block">
										<div>
											<p>基础信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="姓名" prop="">
														<span>{{initText.username}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="工号">
														<span>{{initText.job_num}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="隶属公司" prop="">
														<span>{{initText.company_name}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="部门" prop="">
														<span>{{initText.department_name}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="职位" prop="">
														<span>{{initText.position}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="手机号" prop="">
														<span>{{initText.mobile}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="入职时间" prop="">
														<span>{{initText.entry_time}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="离职时间">
														<span class="font-color" v-if="initText.leave_time === '0'">离职后生成</span>
														<span class="font-color" v-else>{{initText.leave_time}}</span>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>工作信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="员工类型" prop="">
														<span>{{initText.emptype_text}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="试用期" prop="">
														<span>{{initText.trial_text}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="员工状态" prop="">
														<span>{{initText.status_text}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="转正日期" prop="">
														<span>{{initText.positive_time}}</span>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>合同信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="合同类型" prop="">
														<span>{{initText.contract_type_text}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="合同期限" prop="">
														<span>{{initText.contract_life_text}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="合同起始日" prop="">
														<span>{{initText.contract_begin_time}}</span>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="合同到期日" prop="">
														<span>{{initText.contract_end_time}}</span>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>个人信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="身份证姓名" prop="Id_name">
														<el-input v-model="ruleForm.Id_name" placeholder="请输入姓名"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="证件号码" prop="identify">
														<el-input v-model="ruleForm.identify" @blur="idBlur(ruleForm.identify)" placeholder="请输入证件号码"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="出生日期" prop="birthday">
														<el-date-picker
															prefix-icon="el-icon-date"
															:editable="false"
															v-model="ruleForm.birthday"
															align="right"
															type="date"
															placeholder="选择日期">
														</el-date-picker>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="性别" prop="sex">
														<el-select
															v-model="ruleForm.sex"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.sex_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="民族" prop="nation">
														<el-select
															v-model="ruleForm.nation"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.nation_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="身份证地址" prop="Id_address">
														<el-input v-model="ruleForm.Id_address" placeholder="请输入身份证地址" maxlength="18"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="证件有效期" prop="Id_deadline">
														<el-date-picker
															prefix-icon="el-icon-date"
															:editable="false"
															v-model="ruleForm.Id_deadline"
															align="right"
															type="date"
															placeholder="选择日期">
														</el-date-picker>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="户籍类型" prop="register_type">
														<el-select
															v-model="ruleForm.register_type"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.register_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="婚姻状况" prop="marriage">
														<el-select
															v-model="ruleForm.marriage"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.marriage_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="政治面貌" prop="political">
														<el-select
															v-model="ruleForm.political"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.political_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="社保账号" prop="social_account">
														<el-input v-model="ruleForm.social_account" placeholder="请输入社保账号" maxlength="18"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="公积金账号" prop="public_fund_account">
														<el-input v-model="ruleForm.public_fund_account" placeholder="请输入公积金账号" maxlength="20"></el-input>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>学历信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="最高学历" prop="highest_degree">
														<el-select
															v-model="ruleForm.highest_degree"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.highest_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="毕业院校" prop="graduate_school">
														<el-input v-model="ruleForm.graduate_school" placeholder="请输入毕业院校"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12' prop="graduate_time">
													<el-form-item label="毕业时间">
														<el-date-picker
															prefix-icon="el-icon-date"
															:editable="false"
															v-model="ruleForm.graduate_time"
															align="right"
															type="date"
															placeholder="选择日期">
														</el-date-picker>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="所学专业" prop="major">
														<el-input v-model="ruleForm.major" placeholder="请输入所学专业"></el-input>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>工资卡信息</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="银行卡号" prop="bank_card_num">
														<el-input v-model="ruleForm.bank_card_num" placeholder="请输入银行卡号" maxlength="20"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="开户行" prop="open_bank">
														<el-input v-model="ruleForm.open_bank" placeholder="请输入开户行"></el-input>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>紧急联系人</p>
											<el-row class="itme">
												<el-col :span='12'>
													<el-form-item label="姓名" prop="emergency_contact_name">
														<el-input v-model="ruleForm.emergency_contact_name" placeholder="请输入姓名"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="联系电话" prop="emergency_contact_mobile">
														<el-input v-model="ruleForm.emergency_contact_mobile" placeholder="请输入联系电话"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span='12'>
													<el-form-item label="关系" prop="emergency_contact_relation">
														<el-select
															v-model="ruleForm.emergency_contact_relation"
															placeholder="请选择">
															<el-option
																v-for="item in selectArr.emergency_arr"
																:key="item.id"
																:label="item.name"
																:value="item.id">
															</el-option>
														</el-select>
													</el-form-item>
												</el-col>
											</el-row>
										</div>
										<div>
											<p>个人资料</p>
											<el-row class="itme">
												<el-col :span="12" class="header-left">
													<span>身份证正面</span>
													<el-upload
														class="avatar-uploader"
														list-type="picture-card"
														:action="http"
														:show-file-list="false"
														:before-upload="beforeAvatarUpload"
														:on-success="ID_frontSuccess">
														<img v-if="photoArr.ID_card_front_url" :src="photoArr.ID_card_front_url" class="avatar">
														<i v-else class="el-icon-plus avatar-uploader-icon"></i>
													</el-upload>
												</el-col>
												<el-col :span="12" class="header-left">
													<span>身份证背面</span>
													<el-upload
														class="avatar-uploader"
														list-type="picture-card"
														:action="http"
														:show-file-list="false"
														:before-upload="beforeAvatarUpload"
														:on-success="ID_reverseSuccess">
														<img v-if="photoArr.ID_card_reverse_url" :src="photoArr.ID_card_reverse_url" class="avatar">
														<i v-else class="el-icon-plus avatar-uploader-icon"></i>
													</el-upload>
												</el-col>
												<el-col :span="12" class="header-left">
													<span>学历证书</span>
													<el-upload
														class="avatar-uploader"
														list-type="picture-card"
														:action="http"
														:show-file-list="false"
														:before-upload="beforeAvatarUpload"
														:on-success="academicSuccess">
														<img v-if="photoArr.academic_url" :src="photoArr.academic_url" class="avatar">
														<i v-else class="el-icon-plus avatar-uploader-icon"></i>
													</el-upload>
												</el-col>
												<el-col :span="12" class="header-left">
													<span>学位证书</span>
													<el-upload
														class="avatar-uploader"
														list-type="picture-card"
														:action="http"
														:show-file-list="false"
														:before-upload="beforeAvatarUpload"
														:on-success="degreeSuccess">
														<img v-if="photoArr.degree_url" :src="photoArr.degree_url" class="avatar">
														<i v-else class="el-icon-plus avatar-uploader-icon"></i>
													</el-upload>
												</el-col>
												<el-col :span="12" class="header-left">
													<span>离职证明</span>
													<el-upload
														class="avatar-uploader"
														list-type="picture-card"
														:action="http"
														:show-file-list="false"
														:before-upload="beforeAvatarUpload"
														:on-success="leaveSuccess">
														<img v-if="photoArr.leave_positive_url" :src="photoArr.leave_positive_url" class="avatar">
														<i v-else class="el-icon-plus avatar-uploader-icon"></i>
													</el-upload>
												</el-col>
											</el-row>
										</div>
								</div>
							</el-card>
						</el-scrollbar>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="history-timeline clearfix">
						<div class="time-line" v-for="(item,index) in navRight" :key="index">
							<div class="time-line-circle" :class="{'bgcolor': bgColor[index]}"><i :class="{'bgcolor': bgColor[index+1]}"></i></div>
							<div class="time-line-right">
								<div class="line-right-text">
									<span class="span-t" :class="{'textcolor': bgColor[index]}" @click="scrollTo(index)">{{item}}</span>
									<span class="span-content"></span>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-form>
		</el-row>
  </div>
</template>
<style scoped>
/* 头部 */
.back {
	cursor: pointer;
	line-height: 38px;
}
.back i:after {
	content: " ";
	display: inline-block;
	height: 8px;
	width: 8px;
	border-width: 0 0 2px 2px ;
	border-color: #C8C8CD;
	border-style: solid;
	-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	margin-top: -4px;
}
.btn-wp {
	float: right;
}
/* 滚动条 盒子*/
.scroll-wrap {
  /*height: 600px;*/
	height:calc(100vh - 280px);
  overflow: hidden;
}
.scroll-wrap >>> .el-scrollbar .el-scrollbar__wrap {
	overflow-x: hidden!important;
  overflow-y: auto!important;
}
.box-card >>> .el-card__body {
	padding: 20px 0 0!important;
}
.header {
	padding: 0 50px 20px;
}
.header:after {
	content: '';
	display: block;
	clear: both;
}
.header-left {
	height: 160px;
	padding: 0 50px;
}
.header-left > span {
	width: 80px;
	float: left;
	margin-top: 70px;
}
.header-left .codebg {
	float: left;
	width: 130px;
	height: 130px;
	background-color: #f8f8f8;
	border: 1px solid #dcdfe6;
	border-radius:  5px;
	margin-top: 13px;
	margin-left: 25px;
}
.header-left #qrcode {
	margin-left: 7px;
	margin-top: 7px;
}
.header-left img {
	width: 130px;
	height: 130px;
	margin-top: 13px;
	margin-left: 80px;
}
.codebg img {
	margin: 0 !important;
}
.block p {
	margin: 0;
	font-size: 14px;
	padding: 16px 50px;
	background: #f5f7fa;
	font-weight: bold;
}
.el-form >>> .el-row {
	padding: 16px 50px;
}
.el-row >>> .el-col {
	padding: 14px 0;
}
.el-form .el-form-item {
	margin-bottom: 0;
}
.el-form >>> .el-form-item .el-form-item__content {
	width: 60%!important;
}
.el-form >>> .el-form-item__content .el-select {
	width: 100%;
}
.el-form >>> .el-form-item__content .el-input {
	width: 100%;
}

.font-color {
	color: #c0c4cc;
}
/* 右侧导航 */
.history-timeline{
	margin-top:28px;
}
.history-timeline .time-line{
	display: flex;
	position:relative;
	overflow: hidden;
	vertical-align: center;
}
.time-line .time-line-circle{
	width:10px;
	height:10px;
	border-radius:10px;
	background-color:#e6e6e6;
	position:relative;
	top:0px;
	margin:0 14px;
}
.time-line .time-line-right{
	width:58.8%;
}
.time-line-right .line-right-text span{
	display: block;
	line-height: 24px;
}
.line-right-text .span-t{
	color:#c0c4cc;
	cursor: pointer;
	margin-top:-5px;
}
.line-right-text .span-content{
	padding-bottom:25px;
}
.time-line-circle i{
	width:2px;
	height:100vh;
	z-index: -1;
	background-color: #e6e6e6;
	margin-left:-1px;
	position:absolute;
	left:50%;
}
.time-line:last-of-type .time-line-circle i{
	height:0;
}
.bgcolor {
	background: rgb(64, 158, 255)!important;
}
.bgcolor:after {
	background: rgb(64, 158, 255)!important;
}
.textcolor {
	color: rgb(64, 158, 255)!important;
}
/* 图片上传 */
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
	margin-top: 0;
	margin-left: 30px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader img {
	width: 130px;
	margin-top: 8px;
	margin-left: 8px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 132px;
  height: 132px;
  line-height: 132px;
  text-align: center;
}
.avatar {
  width: 132px;
  height: 132px;
  display: block;
}
</style>
<script>
import QRCode from 'qrcodejs2'
import { getToken } from '@/utils/auth'
import { personDetail, getOtherSelect, getBirth, saveTask } from '@/api/hr'
  export default {
    data() {
			var checkPhone = (rule, value, callback) => {
				if (rule.field === 'emergency_contact_mobile') {
					if (value !== '') {
						if (value.length !== 11) {
							callback(new Error('手机号长度 11 个字符'))
						} else if (!(/^1[3456789]\d{9}$/.test(value))) {
							callback(new Error('手机号格式错误'))
						} else {
							callback()
						}
					} else {
						callback()
					}
				} else {
					if (value === '') {
						callback(new Error('请输入手机号'))
					} else if (value.length !== 11) {
						callback(new Error('手机号长度 11 个字符'))
					} else if (!(/^1[3456789]\d{9}$/.test(value))) {
						callback(new Error('手机号格式错误'))
					} else {
						callback()
					}
				}
			}
			var checkNum = (rule, value, callback) => {
				if (value !== '') {
					if (value.length === parseInt(value).toString().length) {
						if (rule.field === 'social_account') {
							if (value.length < 1 && value.lengt > 20) {
								callback(new Error('社保账号长度18以内'))
							} else {
								callback()
							}
						} else if (rule.field === 'public_fund_account') {
							if (value.length < 1 && value.lengt > 20) {
								callback(new Error('公积金账号长度20以内'))
							} else {
								callback()
							}
						} else if (rule.field === 'bank_card_num') {
							if (value.length < 1 && value.lengt > 20) {
								callback(new Error('银行卡号长度20以内'))
							} else {
								callback()
							}
						} else {
							callback()
						}
					} else {
						if (rule.field === 'social_account') {
							if (value.length > 18) {
								callback(new Error('社保账号长度18以内'))
							} else {
								callback(new Error('社保账号必须为纯数字'))
							}
						} else if (rule.field === 'public_fund_account') {
							if (value.length > 20) {
								callback(new Error('公积金账号长度20以内'))
							} else {
								callback(new Error('公积金账号必须为纯数字'))
							}
						} else if (rule.field === 'bank_card_num') {
							if (value.length > 20) {
								callback(new Error('银行卡号长度20以内'))
							} else {
								callback(new Error('银行卡号必须为纯数字'))
							}
						} else {
							callback()
						}
					}
				} else {
					callback()
				}
			}
			var checkIdcard = (rule, value, callback) => {
				const city = {
					11: '北京',
					12: '天津',
					13: '河北',
					14: '山西',
					15: '内蒙古',
					21: '辽宁',
					22: '吉林',
					23: '黑龙江 ',
					31: '上海',
					32: '江苏',
					33: '浙江',
					34: '安徽',
					35: '福建',
					36: '江西',
					37: '山东',
					41: '河南',
					42: '湖北 ',
					43: '湖南',
					44: '广东',
					45: '广西',
					46: '海南',
					50: '重庆',
					51: '四川',
					52: '贵州',
					53: '云南',
					54: '西藏 ',
					61: '陕西',
					62: '甘肃',
					63: '青海',
					64: '宁夏',
					65: '新疆',
					71: '台湾',
					81: '香港',
					82: '澳门',
					91: '国外 '
				}
				let year = value.substr(6, 4)
				let mounth = value.substr(10, 2)
				let day = value.substr(12, 2)
				if (value === '') {
					callback(new Error('请输入身份证号码'))
				} else if (!value || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(value)) {
					callback(new Error('身份证号格式错误'))
				} else if (!city[value.substr(0, 2)]) {
					callback(new Error('身份证号格式错误'))
				} else {
					callback()
				}
				// 平润年
				if (((year % 400 === 0) || year % 100 !== 0) && year % 4 === 0) {
					if (mounth === '02') {
						if (day * 1 > 29) {
							callback(new Error('身份证号格式错误'))
						} else {
							callback()
						}
					}
				} else {
					if (mounth === '02') {
						if (day * 1 > 28) {
							callback(new Error('身份证号格式错误'))
						} else {
							callback()
						}
					}
				}
			}
      return {
				id: this.$route.query.id,
				http: process.env.BASE_API + '/backend/employee/upload-file?token=' + getToken(),
				watch: true,
				part: 1,
				initText: {},
				height: null,
				imgJson: {},
				scrollBar: [0, 300, 500, 682, 1080, 1260, 1400, 1585], // 滚动条距顶部高度
				bgColor: [true, false, false, false, false, false, false, false],
				photoArr: {
					header: '',
					header_url: '',
					ID_card_front: '',
					ID_card_front_url: '',
					ID_card_reverse: '',
					ID_card_reverseurl: '',
					academic: '',
					academic_url: '',
					degree: '',
					degree_url: '',
					leave_positive: '',
					leave_positive_url: ''
				},
				ruleForm: {
					// username: '',
					// job_num: '',
					// company_id: '',
					// department_id: '',
					// position: '',
					// mobile: '',
					// entry_time: '',
					// leave_time: '',
					// emptype: '',
					// trial: '',
					// status: '',
					// positive_time: '',
					// contract_type: '',
					// contract_life: '',
					// contract_begin_time: '',
					// contract_end_time: '',
					// Id_name: '',
					// identify: '',
					// birthday: '',
					// sex: '',
					// nation: '',
					// Id_address: '',
					// Id_deadline: '',
					// register_type: '',
					// marriage: '',
					// political: '',
					// social_account: '',
					// public_fund_account: '',
					// highest_degree: '',
					// graduate_school: '',
					// graduate_time: '',
					// major: '',
					// bank_card_num: '',
					// open_bank: '',
					// emergency_contact_name: '',
					// emergency_contact_mobile: '',
					// emergency_contact_relation: ''
				},
				rules: {
						Id_name: [
							{ required: true, message: '请输入姓名', trigger: 'blur' },
							{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
						],
						identify: [
							{ required: true, validator: checkIdcard, trigger: 'blur' }
						],
						birthday: [
							{ required: true, message: '请选择出生日期', trigger: 'change' }
						],
						sex: [
							{ required: true, message: '请选择性别', trigger: 'blur' }
						],
						nation: [
							{ required: true, message: '请选择民族', trigger: 'blur' }
						],
						Id_address: [
							{ required: false, message: '请输入身份证地址', trigger: 'blur' },
							{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
						],
						Id_deadline: [
							{ required: false, message: '请选择证件有效期', trigger: 'change' }
						],
						register_type: [
							{ required: false, message: '请选择证件类型', trigger: 'blur' }
						],
						marriage: [
							{ required: false, message: '请选择婚姻状况', trigger: 'blur' }
						],
						political: [
							{ required: false, message: '请选择政治面貌', trigger: 'blur' }
						],
						social_account: [
							{ required: false, validator: checkNum, trigger: 'blur' }
						],
						public_fund_account: [
							{ required: false, validator: checkNum, trigger: 'blur' }
						],
						highest_degree: [
							{ required: false, message: '请选择最高学历', trigger: 'blur' }
						],
						graduate_school: [
							{ required: false, message: '请输入毕业院校', trigger: 'blur' },
							{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
						],
						graduate_time: [
							{ required: false, message: '请选择毕业时间', trigger: 'change' }
						],
						major: [
							{ required: false, message: '请输入所学专业', trigger: 'blur' },
							{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
						],
						bank_card_num: [
							{ required: false, validator: checkNum, trigger: 'blur' }
						],
						open_bank: [
							{ required: false, message: '请输入开户行', trigger: 'blur' },
							{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
						],
						emergency_contact_name: [
							{ required: false, message: '请输入姓名', trigger: 'blur' },
							{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
						],
						emergency_contact_mobile: [
							{ required: false, validator: checkPhone, trigger: 'blur' }
						],
						emergency_contact_relation: [
							{ required: false, message: '请选择与联系人关系', trigger: 'blur' }
						]
				},
				navRight: ['基础信息', '工作信息', '合同信息', '个人信息', '学历信息', '工资卡信息', '紧急联系人', '个人资料'],
				selectArr: {
					company_arr: [],
					section_arr: [],
					emptype_arr: [],
					trial_arr: [],
					employee_status_arr: [],
					contract_type_arr: [],
					contract_life_arr: [],
					sex_arr: [],
					nation_arr: [],
					register_arr: [],
					marriage_arr: [],
					political_arr: [],
					highest_arr: [],
					emergency_arr: []
				},
				picker: {
					options1: {
						disabledDate(time) {
						}
					},
					options2: {
						disabledDate(time) {
						}
					},
					options3: {
						disabledDate(time) {
						}
					},
					options4: {
						disabledDate(time) {
						}
					}
				}
      }
		},
		created() {
			this.ininSelect()
			this.init()
		},
    methods: {
			init() {
				personDetail({emp_id: this.id}).then((response) => {
					// 点取消会重置表单 所有查看用一个新变量
					this.initText = response.data
					this.ruleForm = response.data
					// 下拉默认值
					if (this.ruleForm.sex === '0') {
						this.ruleForm.sex = ''
					}
					if (this.ruleForm.nation === '0') {
						this.ruleForm.nation = ''
					}
					if (this.ruleForm.marriage === '0') {
						this.ruleForm.marriage = ''
					}
					if (this.ruleForm.political === '0') {
						this.ruleForm.political = ''
					}
					if (this.ruleForm.register_type === '0') {
						this.ruleForm.register_type = ''
					}
					if (this.ruleForm.highest_degree === '0') {
						this.ruleForm.highest_degree = ''
					}
					if (this.ruleForm.emergency_contact_relation === '0') {
						this.ruleForm.emergency_contact_relation = ''
					}
					// 图片转换成json
					this.imgJson = this.initText.img_url
					this.photoArr.header_url = response.data.photo_url
					if (this.imgJson) {
						this.photoArr.ID_card_front_url = this.imgJson.ID_card_front
						this.photoArr.ID_card_reverse_url = this.imgJson.ID_card_reverse
						this.photoArr.academic_url = this.imgJson.academic
						this.photoArr.degree_url = this.imgJson.degree
						this.photoArr.leave_positive_url = this.imgJson.leave_positive
					}
					// 查看编辑 时间转换
					if (this.initText.entry_time !== '0') {
						this.initText.entry_time = this.parseTime(parseInt(this.initText.entry_time))
					} else {
						this.initText.entry_time = ''
					}
					if (this.initText.leave_time !== '0') {
						this.initText.leave_time = this.parseTime(parseInt(this.initText.leave_time))
					} else {
						this.initText.leave_time = ''
					}
					if (this.initText.positive_time !== '0') {
						this.initText.positive_time = this.parseTime(parseInt(this.initText.positive_time))
					} else {
						this.initText.positive_time = ''
					}
					if (this.initText.contract_begin_time !== '0') {
						this.initText.contract_begin_time = this.parseTime(parseInt(this.initText.contract_begin_time))
					} else {
						this.initText.contract_begin_time = ''
					}
					if (this.initText.contract_end_time !== '0') {
						this.initText.contract_end_time = this.parseTime(parseInt(this.initText.contract_end_time))
					} else {
						this.initText.contract_end_time = ''
					}
					if (this.initText.birthday !== '0') {
						this.initText.birthday = this.parseTime(parseInt(this.initText.birthday))
					} else {
						this.initText.birthday = ''
					}
					if (this.initText.Id_deadline !== '0') {
						this.initText.Id_deadline = this.parseTime(parseInt(this.initText.Id_deadline))
					} else {
						this.initText.Id_deadline = ''
					}
					if (this.initText.graduate_time !== '0') {
						this.initText.graduate_time = this.parseTime(parseInt(this.initText.graduate_time))
					} else {
						this.initText.graduate_time = ''
					}
					this.getQrcode()
				})
			},
			ininSelect() {
				getOtherSelect({type: 'sex'}).then((response) => {
					this.selectArr.sex_arr = response.data
				})
				getOtherSelect({type: 'nation'}).then((response) => {
					this.selectArr.nation_arr = response.data
				})
				getOtherSelect({type: 'register_type'}).then((response) => {
					this.selectArr.register_arr = response.data
				})
				getOtherSelect({type: 'marriage'}).then((response) => {
					this.selectArr.marriage_arr = response.data
				})
				getOtherSelect({type: 'political'}).then((response) => {
					this.selectArr.political_arr = response.data
				})
				getOtherSelect({type: 'highest_degree'}).then((response) => {
					this.selectArr.highest_arr = response.data
				})
				getOtherSelect({type: 'emergency_contact_relation'}).then((response) => {
					this.selectArr.emergency_arr = response.data
				})
			},
			idBlur(val) {
				if (/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(val)) {
					getBirth({id_card: val}).then((response) => {
						this.ruleForm.birthday = response.data.birthday
						this.ruleForm.sex = response.data.sex
					})
				}
			},
			saveBtn() {
				this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
						this.ruleForm.emp_id = parseInt(this.id)
						delete this.ruleForm.leave_time
						this.ruleForm.photo_url = this.photoArr.header_url
						this.ruleForm.ID_card_front = this.photoArr.ID_card_front_url
						this.ruleForm.ID_card_reverse = this.photoArr.ID_card_reverse_url
						this.ruleForm.academic = this.photoArr.academic_url
						this.ruleForm.degree = this.photoArr.degree_url
						this.ruleForm.leave_positive = this.photoArr.leave_positive_url
						saveTask(this.ruleForm).then((response) => {
							if (response.status === 200) {
								this.$message({
									message: '保存成功',
									type: 'success'
								})
							this.$router.push('/task/index')
							}
						})
          } else {
						console.log('error submit!!')
						this.$message.error('提示：请完善带 * 的信息')
            return false
          }
        })
			},
			resetForm() {
				this.$refs['ruleForm'].resetFields()
			},
			scrollTo(clickIndex) {
				const scrollDom = document.querySelector('.el-scrollbar__wrap')
				this.scrollBar.forEach((item, index) => {
					if (index === clickIndex) {
						scrollDom.scrollTop = item
					}
				})
				this.height = scrollDom.scrollTop
				this.heightChange(this.height)
			},
      headerSuccess(res, file) {
				this.photoArr.header = URL.createObjectURL(file.raw)
				this.photoArr.header_url = res.data.fileUrl
      },
			ID_frontSuccess(res, file) {
				this.photoArr.ID_card_front = URL.createObjectURL(file.raw)
				this.photoArr.ID_card_front_url = res.data.fileUrl
      },
			ID_reverseSuccess(res, file) {
				this.photoArr.ID_card_reverse = URL.createObjectURL(file.raw)
				this.photoArr.ID_card_reverse_url = res.data.fileUrl
      },
			academicSuccess(res, file) {
				this.photoArr.academic = URL.createObjectURL(file.raw)
				this.photoArr.academic_url = res.data.fileUrl
      },
			degreeSuccess(res, file) {
				this.photoArr.degree = URL.createObjectURL(file.raw)
				this.photoArr.degree_url = res.data.fileUrl
      },
			leaveSuccess(res, file) {
				this.photoArr.leave_positive = URL.createObjectURL(file.raw)
				this.photoArr.leave_positive_url = res.data.fileUrl
      },
      beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2
				const isJPG = file.type === 'image/jpeg'
				const isPNG = file.type === 'image/png'

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
				}
				if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能上传jpg/png文件!')
				}
        return isLt2M
			},
			back() {
				this.$router.push('/task/index')
			},
			getQrcode() {
				setTimeout(() => {
					if (document.getElementById('qrcode').children.length < 2) {
						const qrcode = new QRCode('qrcode', {
							width: 116,
							height: 116,
							text: this.initText.employee_id
						})
						console.log(qrcode)
					}
				}, 0)
			},
			menu() {
				// 查看滚动条距顶部的距离
				const scrollDom = document.querySelector('.scrollbar-wrap .el-scrollbar__wrap')
				this.height = scrollDom.scrollTop
			},
			heightChange(curr) {
				this.scrollBar.forEach((item, index) => {
					if (curr >= 0 && curr < 300) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, false)
						this.$set(this.bgColor, 2, false)
						this.$set(this.bgColor, 3, false)
						this.$set(this.bgColor, 4, false)
						this.$set(this.bgColor, 5, false)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 300 && curr < 500) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, false)
						this.$set(this.bgColor, 3, false)
						this.$set(this.bgColor, 4, false)
						this.$set(this.bgColor, 5, false)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 500 && curr < 682) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, false)
						this.$set(this.bgColor, 4, false)
						this.$set(this.bgColor, 5, false)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 682 && curr < 1080) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, true)
						this.$set(this.bgColor, 4, false)
						this.$set(this.bgColor, 5, false)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 1080 && curr < 1260) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, true)
						this.$set(this.bgColor, 4, true)
						this.$set(this.bgColor, 5, false)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 1260 && curr < 1400) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, true)
						this.$set(this.bgColor, 4, true)
						this.$set(this.bgColor, 5, true)
						this.$set(this.bgColor, 6, false)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 1400 && curr < 1585) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, true)
						this.$set(this.bgColor, 4, true)
						this.$set(this.bgColor, 5, true)
						this.$set(this.bgColor, 6, true)
						this.$set(this.bgColor, 7, false)
					} else if (curr >= 1585) {
						this.$set(this.bgColor, 0, true)
						this.$set(this.bgColor, 1, true)
						this.$set(this.bgColor, 2, true)
						this.$set(this.bgColor, 3, true)
						this.$set(this.bgColor, 4, true)
						this.$set(this.bgColor, 5, true)
						this.$set(this.bgColor, 6, true)
						this.$set(this.bgColor, 7, true)
					}
				})
			},
			parseTime(timestamp) {
				const date = new Date(parseInt(timestamp) * 1000)
				const Y = date.getFullYear() + '-'
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
				return Y + M + D
			}
		},
		mounted() {
			const myScroll = document.querySelector('.scrollbar-wrap')
			myScroll.addEventListener('scroll', this.menu, true)
		},
		watch: {
			height: function(curr) {
				this.heightChange(curr)
			}
		}
  }
</script>
